<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .btn {
      margin: 5px 5px;
    }

    .bg-f2 {
      background-color: #f8f9fa;
    }

    video {
      width: 500px;
      height: auto;
    }

    .videoRow {
      margin-top: 30px;
    }

    #previewLabel {
      display: block;
      position: absolute;
    }

    .rangeInput {
      border: none;
      border-bottom: 1px solid #000;
      outline: none;
      width: 59px;
      padding-left: 5px;
      font-weight: 500;
    }

    .box {
      background: #007bff;
      width: 0px;
      height: 0px;
      position: absolute;
      opacity: 0.3;
      cursor: move;
    }
  </style>
  <title class="screenSharing">屏幕共享</title>
<link href="../index.20849460.css" rel="stylesheet"></head>

<body class="bg-f2">

  <div class="container">

    <div class="my-3 p-3 bg-white rounded box-shadow small">

      <h6 class="border-bottom border-gray pb-2 mb-0 screenSharing">屏幕共享</h6>

      <div class="row" style="margin-top:1%">

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="audioList"><strong
                  class="text-gray-dark audioDevices">音频设备</strong></label>
            </div>
            <select class="custom-select" id="audioList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoList"><strong
                  class="text-gray-dark videoDevices">视频设备</strong></label>
            </div>
            <select class="custom-select" id="videoList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenList"><strong
                  class="text-gray-dark shareScreen">共享屏幕</strong></label>
            </div>
            <select class="custom-select" id="screenList" style="width: 50%; max-width: 200px;">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenList"><strong
                  class="text-gray-dark isScreenAudio">是否共享音频</strong></label>
            </div>
            <select class="custom-select" id="isScreenAudio" style="width: 50%; max-width: 200px;">
              <option value="yes" class="yes">是</option>
              <option value="no" class="no">否</option>
            </select>
          </div>
        </div>

      </div>
      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="roomId" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter room ID" value="">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenWidth"><strong class="text-gray-dark width">宽</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="screenWidth" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter screen width">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenHeight"><strong
                  class="text-gray-dark height">高</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="screenHeight" style="width: 60%; max-width: 200px;"
              aria-describedby="emailHelp" placeholder="please enter screen height">
          </div>
        </div>
        <!-- <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoQuality"><strong class="text-gray-dark videoQuality">推流质量</strong></label>
            </div>
            <select class="custom-select" id="videoQuality" style="width: 50%">
              <option value="1" selected>标清</option>
              <option value="2">高清</option>
              <option value="3">超清</option>
              <option value="4">自定义</option>
            </select>
          </div>
        </div> -->

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenFrameRate"><strong
                  class="text-gray-dark height">共享帧率</strong></label>
            </div>
            <select class="custom-select" id="screenFrameRate">
              <option value="5">5</option>
              <option value="10" selected>10</option>
              <option value="15">15</option>
              <option value="20">20</option>
              <option value="30">30</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="screenBitRate"><strong class="text-gray-dark">共享码率</strong></label>
            </div>
            <select class="custom-select" id="screenBitRate">
              <option value="800">800</option>
              <option value="1500">1500</option>
              <option value="2000" selected>2000</option>
              <option value="2500">2500</option>
            </select>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-sm">
          <button type="button" id="createRoom" class="btn btn-primary btn-sm enterRoomPush">进入房间（推流）</button>
          <button type="button" id="openRoom" class=" btn btn-primary btn-sm enterRoomPlay">进入房间</button>
          <button type="button" id="screenShot" class="btn btn-primary btn-sm screenSharingContent">捕捉屏幕</button>
          <button type="button" id="rangeScreenShare" class="btn btn-primary btn-sm">区域屏幕共享</button>
          <button type="button" id="stopScreenShot" class="btn btn-primary btn-sm stopScreenSharing">停止捕捉</button>
          <button type="button" id="enterRoom" class="btn btn-primary btn-sm">进房预览</button>
          <button type="button" id="publish" class="btn btn-primary btn-sm">推流</button>
          <button type="button" id="replaceScreenShot" class="btn btn-primary btn-sm">切换为屏幕共享</button>
          <button type="button" id="replaceCamera" class="btn btn-primary btn-sm">切换为摄像头</button>
          <button type="button" id="replaceExternalVideo" class="btn btn-primary btn-sm">切换外部视频轨</button>
          <button type="button" id="replaceMicro" class="btn btn-primary btn-sm">切换为麦克风</button>
          <button type="button" id="replaceExternalAudio" class="btn btn-primary btn-sm">切换外部音频轨</button>
          <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
        </div>
      </div>

      <div class="row videoRow">
        <div class="col-sm">
          <label id="previewLabel" class="text-white"></label>
          <video id="previewVideo" autoplay muted playsinline></video>
          <!-- <video id="previewScreenVideo"autoplay muted playsinline></video> -->
          <div class="previewScreenVideo">

          </div>
          <video id="rangeShareVideo" autoplay muted playsinline></video>
          <video id="customVideo" crossOrigin="anonymous" muted playsinline autoplay controls
            src="https://zego-public.oss-cn-shanghai.aliyuncs.com/sdk-doc/assets/big_buck_bunny.mp4" loop></video>
          <video id="testVideo" autoplay muted playsinline></video>
        </div>

        <div class="col-sm remoteVideo">
          <!--<video  autoplay muted playsinline></video>-->
        </div>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="staticBackdropLabel">自定义共享区域</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div>可通过按住shfit + 鼠标拖拽选择区域(以页面上显示的屏幕共享的那个视频为基准) </div>
              <div style="margin-bottom: 8px;">选择后双击选中区域确认选择</div>
              <form>
                <div class="form-group">
                  <label for="videoXRange">起始点横坐标：</label>
                  <input type="number" id="videoXInput" class="rangeInput" value="0">
                  <input type="range" class="form-control-range" id="videoXRange" value="0">
                </div>
                <div class="form-group">
                  <label for="videoYRange">起始点纵坐标: </label>
                  <input type="number" id="videoYInput" class="rangeInput" value="0">
                  <input type="range" class="form-control-range" id="videoYRange" value="0">
                </div>
                <div class="form-group">
                  <label for="videoWidthRange">共享区域的宽度：</label>
                  <input type="number" id="videoWidthInput" class="rangeInput">
                  <input type="range" class="form-control-range" id="videoWidthRange" value="20">
                </div>
                <div class="form-group">
                  <label for="videoHeightRange">共享区域的高度：</label>
                  <input type="number" id="videoHeightInput" class="rangeInput">
                  <input type="range" class="form-control-range" id="videoHeightRange" value="20">
                </div>
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">是否使用ImageCapture</label>
                </div>
                <button type="button" id="modalSubmit" class="btn btn-primary">确认</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript" src="../screen/screen.bundle.js"></script></body>

</html>
